<template>
  <div class="file-table-wrapper">
    <!-- 文件表格 -->
    <el-table ref="multipleTable"
        fit
        tooltip-effect="dark"
        :data="fileList"
        :highlight-current-row="true"
        v-loading="loading"
        @selection-change="handleSelectRow"
        @sort-change="handleSortChange"
        @row-contextmenu="handleContextMenu"
    >
      <el-table-column
          type="selection"
          key="selection"
          width="56"
          align="center"
      ></el-table-column>
      <el-table-column label="素材名称" prop="title" key="title" :sort-by="['isDir', 'fileName']" sortable show-overflow-tooltip>
        <template #default="scope">
          <a @click="handleFileNameClick(scope.row, scope.$index)">
            <AssetsName :ext="scope.row.ext" :objectType="scope.row.objectType" :title="fileFunction.assetsName(scope.row.objectType, scope.row.title, scope.row.ext)"></AssetsName>
          </a>
        </template>
      </el-table-column>
      <el-table-column
          label="大小"
          prop="size"
          key="size"
          show-overflow-tooltip>
        <template #default="scope">
          {{fileFunction.calculateFileSize(scope.row.size)}}
        </template>
      </el-table-column>
      <el-table-column
          label="可见范围"
          prop="permission"
          show-overflow-tooltip>
        <template #default="scope">
          {{fileFunction.permissionName(scope.row.permission)}}
        </template>
      </el-table-column>
      <el-table-column
          label="创建人"
          prop="createUser"
          width="160"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="创建时间"
          key="createTime"
          prop="createTime"
          width="160"
          align="center"
      ></el-table-column>
      <el-table-column
          label="操作"
          key="operation">
        <template #default="scope">
          <el-tooltip content="修改" placement="top" v-if="scope.row.id !== 1">
            <el-button link type="primary" icon="Edit" @click="updateAssets(scope.row)" v-hasPermi="['system:assets:edit']"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" v-if="scope.row.id !== 1">
            <el-button link type="primary" icon="Delete" @click="deleteAssets(scope.row)" v-hasPermi="['system:assets:remove']"></el-button>
          </el-tooltip>
          <el-tooltip content="下载" placement="top" v-if="scope.row.id !== 1">
            <el-button link type="primary" icon="Download" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="FileTable">
import useAssetsStore from '@/store/modules/assets.js'
import useCommonStore from '@/store/modules/common.js'
import {fileFunction} from '@/utils/chenxi.js'
import {ElMessageBox } from 'element-plus'
import AssetsName from "./AssetsName";
let proxy = getCurrentInstance();
const props = defineProps({
  // 文件列表
  fileList: {
    required: true,
    type: Array
  },
  loading:{
    required: false,
    type: Boolean
  }
});
const officeFileType = ref(['ppt', 'pptx', 'doc', 'docx', 'xls', 'xlsx']);
const sortedFileList = ref([]); //  排序后的表格数据
const assetsStore = useAssetsStore();
const commonStore = useCommonStore();
const filePath = ref(props.filePath)
const fileType = ref(props.fileType)
const route = useRoute();
const routeName = computed(() => {
  return route.query
});
// 屏幕宽度
const screenWidth = computed(() => {
  return commonStore.getterScreenWidth
})
const emits = defineEmits(["onDeleteAssets", "onUpdateAssets", "onSelectedRows", "onClickFolder", "onPreviewAssets"]);

/**
 * 文件列表变化时清空表格已选行
 */
watch(() => props.fileList, (val) => {
  clearSelectedTable()
  proxy.refs.multipleTable.clearSort()
  sortedFileList.value = val
})

  /**
   * 清空表格已选行
   * @description 用于父组件调用 | 本组件调用，请勿删除
   */
function  clearSelectedTable() {
    proxy.refs["multipleTable"].clearSelection()
}

function handleFileNameClick(row, index){
  if ("folder" === row.objectType) {
    emits("onClickFolder", row)
  }else{
    emits("onPreviewAssets", row)
  }
}

function deleteAssets(row) {
  ElMessageBox.confirm(
      '确认删除 "'+fileFunction.assetsName(row.objectType, row.title, row.ext)+'" 吗?',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
    emits("onDeleteAssets", row)
  }).catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

function updateAssets(row){
  emits("onUpdateAssets", row)
}

function handleSelectRow(val) {
  emits("onSelectedRows", val)
}

</script>

<style lang="scss" scoped>
a {
  point: cursor
}

</style>
